<template>
  <div>
    <router-link to="/index"> <img class="home-image" src="../../../static/index/home.png" /> </router-link>
    <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal" background-color="#272e38" >
      <el-menu-item class="menu-item" index="/index"><p class="text">首页</p></el-menu-item>
      <el-menu-item class="menu-item" index="/index/course"><p class="text">精品专区</p></el-menu-item>
      <el-menu-item class="menu-item" index="/index/help"><p class="text">帮助中心</p></el-menu-item>
      <el-menu-item class="menu-item" index="/index/productDynamic"><p class="text">产品动态</p></el-menu-item>
    </el-menu>
    <div class="loginOrReg" v-bind:class="{'undisplay': !logined}">
      <button @click="login" class="login"><p class="text">登录</p></button>
      <button @click="regist" class="regist"><p class="text">注册</p></button>
    </div>
    <div class="enterClass" v-bind:class="{'undisplay': logined}">
      <el-button @click="enterClass" class="enter-class" round><p class="text" style="line-height: 1px">进入课堂</p></el-button>
    </div>
  </div>
</template>
<script>
export default {
  date () {
    return {

    }
  },
  methods: {
    login () {
      this.$router.push('/login')
    },
    regist () {
      this.$router.push('/register')
    },
    enterClass () {
      const role = sessionStorage.getItem('type')
      if (role === 'student') {
        this.$router.push('/mainStudent')
      } else {
        this.$router.push('/teacher')
      }
    },
    getCookie (name) { // 获取指定名称的cookie值
      // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
      var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'))
      if (arr != null) {
        // console.log(arr);
        return unescape(arr[2])
      }
      return null
    }
  },
  computed: {
    logined: function () {
      return sessionStorage.getItem('username') === null
    }
  }
}
</script>
<style scoped>
  .home-image {
    float: left;
  }
  .el-menu-demo {
    float: left;
  }
  .menu-item {
    margin-right: 32px;
  }
  .loginOrReg {
    width: 15%;
    float: right;
    margin-top: 11px;
    display: flex;
    justify-content: space-around;
  }
  .login {
    width: 78px;
    height: 38px;
    border: #ededed solid 1px;
    background-color: #272e38;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .regist {
    width: 76px;
    height: 36px;
    margin-left: 20px;
    border: 0px;
    background-color: #357ae8;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 36px;
  }
  .enterClass {
    width: 15%;
    float: right;
    margin-top: 16px;
  }
  .enter-class {
    width: 128px;
    height: 28px;
    border: 0px;
    background-color: #004cb6;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 14px;
    color: #ededed;
  }
  .undisplay {
    display: none;
  }
</style>
